<template>
  <div class="home">
    <div class="sys_name">
      {{ curId }}| {{ secId }}| {{ thirdId }}| {{ foreId }}|
      {{ fivId }}

      <div class="top">系统名称</div>
      <ul class="tp_list">
        <li class="tp_item" v-for="item in list" :key="item.id">
          <div class="tp_item_name" @click="curChange(item.id)">
            {{ item.name }}
            <i
              class="icon"
              :class="[
                curId === item.id ? 'el-icon-arrow-down' : 'el-icon-arrow-up',
              ]"
              v-show="item.children"
            ></i>
          </div>
          <ul class="tp_item-list" v-show="item.children && curId === item.id">
            <li
              class="tp_item_item"
              :style="{ color: secId === it.id ? 'aqua' : '' }"
              v-for="it in item.children"
              :key="it.id"
              @click="secChange(it.id)"
            >
              {{ it.name }}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="row_name">
      <div class="top">角色名称</div>
      <ul class="tp_list" v-show="roleObj[secId]">
        <li class="tp_item" v-for="item in roleObj[secId]" :key="item.id">
          <div
            class="tp_item_name"
            :style="{ color: thirdId === item.id ? 'aqua' : '' }"
            @click="thirdChange(item.id)"
          >
            {{ item.name }}
          </div>
        </li>
      </ul>
    </div>
    <div class="right_box">
      <el-tabs v-model="type">
        <el-tab-pane label="权限" name="authority">
          <ul class="tp_list authority" v-show="authorityObj[thirdId]">
            <li
              class="tp_item"
              v-for="item in authorityObj[thirdId]"
              :key="item.id"
            >
              <div
                class="tp_item_name"
                :style="{ color: foreId === item.id ? 'aqua' : '' }"
                @click="foreChange(item.id)"
              >
                {{ item.name }}
                <i
                  class="icon"
                  :class="[
                    foreId === item.id
                      ? 'el-icon-arrow-down'
                      : 'el-icon-arrow-up',
                  ]"
                  v-show="item.children"
                ></i>
              </div>
              <ul
                class="tp_item-list"
                v-show="item.children && foreId === item.id"
              >
                <li
                  class="tp_item_item"
                  :style="{ color: fivId === it.id ? 'aqua' : '' }"
                  v-for="it in item.children"
                  :key="it.id"
                  @click="fivChange(it.id)"
                >
                  {{ it.name }}
                  <i
                    class="icon"
                    :class="[
                      fivId === it.id
                        ? 'el-icon-arrow-down'
                        : 'el-icon-arrow-up',
                    ]"
                    v-show="it.check"
                  ></i>
                  <div class="role_list" v-show="it.check && fivId === it.id">
                    <el-checkbox-group v-model="it.check">
                      <el-checkbox label="添加"></el-checkbox>
                      <el-checkbox label="修改"></el-checkbox>
                      <el-checkbox label="删除"></el-checkbox>
                    </el-checkbox-group>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="成员" name="member">
          <ul class="tp_list member" v-show="menberObj[thirdId]">
            <li
              class="tp_item"
              v-for="item in menberObj[thirdId]"
              :key="item.id"
            >
              <div class="tp_item_name">
                {{ item.name }}
                <i class="el-icon-remove-outline"></i>
              </div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      // 系统名称一级
      curId: "1",
      // 系统名称二级
      secId: "1-1",
      // 角色名称
      thirdId: "1-1-1",
      // 权限成员一级
      foreId: "1-1-1-1",
      // 权限成员二级
      fivId: "1-1-1-1-1",
      type: "authority",
      list: [
        {
          id: "1",
          name: "慧应用",
          children: [
            {
              id: "1-1",
              name: "巡检猫",
            },
            {
              id: "1-2",
              name: "设备猫",
            },
            {
              id: "1-3",
              name: "能源猫",
            },
            {
              id: "1-4",
              name: "安全猫",
            },
          ],
        },
        {
          id: "2",
          name: "慧人才",
        },
        {
          id: "3",
          name: "供需大厅",
          children: [
            {
              id: "3-1",
              name: "巡检猫",
            },
            {
              id: "3-2",
              name: "设备猫",
            },
            {
              id: "3-3",
              name: "能源猫",
            },
            {
              id: "3-4",
              name: "安全猫",
            },
          ],
        },
      ],
      roleObj: {
        "1-1": [
          {
            id: "1-1-1",
            name: "巡检角色",
          },
          {
            id: "1-1-2",
            name: "消防角色",
          },
        ],
      },
      authorityObj: {
        "1-1-1": [
          {
            id: "1-1-1-1",
            name: "基础设置",
            children: [
              {
                id: "1-1-1-1-1",
                name: "基础基础",
                check: ["添加", "修改", "删除"],
              },
              {
                id: "1-1-1-1-2",
                name: "基础基础2",
                check: ["添加", "修改", "删除"],
              },
            ],
          },
          {
            id: "1-1-1-2",
            name: "业务分析",
          },
          {
            id: "1-1-1-3",
            name: "报表分析",
          },
        ],
      },
      menberObj: {
        "1-1-1": [
          {
            id: "1-1-1-1",
            name: "张三/现场",
          },
          {
            id: "1-1-1-2",
            name: "张三2/现场",
          },
          {
            id: "1-1-1-3",
            name: "张三3/现场",
          },
        ],
      },
    };
  },
  watch: {
    secId(val) {
      console.log(this.roleObj, val);
      let { children } = this.roleObj[val] ? this.roleObj[val] : {};

      this.thirdId = children ? children[0].id : "";
    },
    thirdId(val) {
      let obj = this.type === "authority" ? "authorityObj" : "menberObj";
      let { children } = obj[val] ? obj[val] : {};
      this.foreId = children ? children[0].id : "";
    },
    foreId(val) {
      if (this.type === "authority") { 
        let obj = this.authorityObj[this.thirdId]?this.authorityObj[this.thirdId]:{}; 
        let { children } = obj[val] ? obj[val] : {};
        this.fivId = children ? children[0].id : "";
      }
    },
  },
  methods: {
    curChange(curId) {
      this.curId = this.curId === curId ? "" : curId;
    },
    secChange(secId) {
      this.secId = secId;
    },
    thirdChange(thirdId) {
      this.thirdId = this.thirdId === thirdId ? "" : thirdId;
    },
    foreChange(foreId) {
      this.foreId = this.foreId == foreId ? "" : foreId;
    },
    fivChange(fivId) {
      this.fivId = fivId;
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
